<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>Title</title>
    <script src="${ctx}/js/jquery-1.8.2.min.js"></script>
    <script src="${ctx}/js/fileupload.js"></script>
    <link href="<%=request.getContextPath()%>/css/css.css" rel="stylesheet">
    <script>
        $(function(){
            $.ajax({
                type: "post",
                url: "citylist.do",
                data: {"pid":0},
                success: function (res) {
                    for (let x in res) {
                        if(res[x].id=="${map.shengid}"){
                            $("[name='sheng.id']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                            $("[name='sheng.id']").trigger("change");
                        }else{
                            $("[name='sheng.id']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                        }
                    }
                }
            })
            $("[name='sheng.id']").change(function(){
                let pid = $(this).val();
                $("[name='shi.id']").empty();
                $("[name='shi.id']").append("<option value=''>请选择</option>")
                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>")
                $.ajax({
                    type: "post",
                    url: "citylist.do",
                    data: {"pid":pid},
                    success: function (res) {
                        for (let x in res) {
                            if(res[x].id=="${map.shiid}"){
                                $("[name='shi.id']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                                $("[name='shi.id']").trigger("change");
                            }else{
                                $("[name='shi.id']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                            }
                        }
                    }
                })
            })
            $("[name='shi.id']").change(function(){
                let pid = $(this).val();
                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>")
                $.ajax({
                    type: "post",
                    url: "citylist.do",
                    data: {"pid":pid},
                    success: function (res) {
                        for (let x in res) {
                            if(res[x].id=="${map.xianid}"){
                                $("[name='xian.id']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                                $("[name='xian.id']").trigger("change");
                            }else{
                                $("[name='xian.id']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                            }
                        }
                    }
                })
            })
        })
        function add(){
            let formData = new FormData($("form")[0]);
            $.ajax({
                type: "post",
                url: "add.do",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    if(res>0){
                        alert("注册成功");
                        location="list.do";
                    }else{
                        alert("注册失败");
                    }
                }
            })
        }
    </script>
</head>
<body>

<form action="add.do" method="post">
    用户名:<input type="text" name="name"><br>
    密码:<input type="text" name="password"><br>
    性别:
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="" value="女">女
    <br>
    爱好:
    <input type="checkbox" name="hobby" value="抽烟">抽烟
    <input type="checkbox" name="" value="喝酒">喝酒
    <input type="checkbox" name="" value="烫头">烫头
    <br>
    日期:<input type="date" name="bdate"><br>
    图片:
    <div class="photoUpLoad" >
        <input type="file"   class="photo" name="photo" accept="image/*"><span class="cross">+</span>
        <img src="" alt="" class="photoEcho">
    </div>
    省:
    <select name="sheng.id">
        <option value="">请选择</option>
    </select>
    市:
    <select name="shi.id">
        <option value="">请选择</option>
    </select>
    县:
    <select name="xian.id">
        <option value="">请选择</option>
    </select>
</form>

<input type="button" value="添加" onclick="add()">
</body>
</html>